<template>
  <div class="bgc-white">
    <div class="status-process-box bgc-white">
      <status-process :dataObj="dataObj" />
    </div>
    <div class="bgc-white order-status-box width-per-100">
      <order-status :dataObj="dataObj" />
    </div>
    <div class="bgc-white pad-l-20 pad-b-25 pad-r-20 pad-t-30 mar-t-20">
      <base-info :dataObj="dataObj" />
    </div>
    <div class="mar-t-20 bgc-white pad-l-20 pad-r-20">
      <finish-order-list :dataObj="dataObj" />
    </div>
  </div>
</template>
<script lang="ts">

import { defineComponent, onMounted, ref } from 'vue'
import StatusProcess from './components/StatusProcess/index.vue'
import FinishOrderList from './components/FinishOrderList/index.vue'
import OrderStatus from './components/OrderStatus/index.vue'
import BaseInfo from './components/BaseInfo/index.vue'
import { useRoute } from 'vue-router'
import { getOrderDetail } from '@/api/order/order'
export default defineComponent({
  components: {
    StatusProcess,
    FinishOrderList,
    OrderStatus,
    BaseInfo
  },
  setup() {
    const router = useRoute()
    const loading = ref(false)
    const dataObj = ref(Object)
    const orderId = router.query.orderId

    onMounted(() => {
      // 初始化方法
      init()
    })

    const init = () => {
      loading.value = true
      getOrderDetail(orderId).then(response => {
        loading.value = false
        if (response.isError) return
        dataObj.value = response.data
      })
    }

    return {
      dataObj
    }

  }
})
</script>

<style lang="scss" scoped>
.status-process-box {
  padding: 50px 20px;
  padding-left: 73px;
}
</style>
